<template>
  <el-container>
    <el-aside width='250px'>

          <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            >
            <el-menu-item index="1">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-malaixiya"></use>
              </svg>
              <span slot="title">马来西亚-MY-60</span>
            </el-menu-item>
            <el-menu-item index="2">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-yindunixiya"></use>
              </svg>
              <span slot="title">印度尼西亚-ID-62</span>
            </el-menu-item>
            <el-menu-item index="3">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-feilvbin"></use>
              </svg>
              <span slot="title">菲律宾-PH-63</span>
            </el-menu-item>
            <el-menu-item index="4">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xinjiapo"></use>
              </svg>
              <span slot="title">新加坡-SG-65</span>
            </el-menu-item>
            <el-menu-item index="5">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-taiguo"></use>
              </svg>
              <span slot="title">泰国-TH-66</span>
            </el-menu-item>
            <el-menu-item index="6">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-yuenan"></use>
              </svg>
              <span slot="title">越南-VN-84</span>
            </el-menu-item>
            <el-menu-item index="7">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-myanmarmiandian"></use>
              </svg>
              <span slot="title">缅甸-MM-95</span>
            </el-menu-item>
            <el-menu-item index="8">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-bruneiwenlai"></use>
              </svg>
              <span slot="title">文莱-BN-673</span>
            </el-menu-item>
            <el-menu-item index="9">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-jianpuzhai"></use>
              </svg>
              <span slot="title">柬埔寨-KH-855</span>
            </el-menu-item>
            <el-menu-item index="10">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-laozhua"></use>
              </svg>
              <span slot="title">老挝-LA-856</span>
            </el-menu-item>
            <el-menu-item index="11">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-aodaliya"></use>
              </svg>
              <span slot="title">澳大利亚-AU-61</span>
            </el-menu-item>
            <el-menu-item index="12">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xinxilan"></use>
              </svg>
              <span slot="title">新西兰-NZ-64</span>
            </el-menu-item>
            <el-menu-item index="13">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-Russia-eluosi"></use>
              </svg>
              <span slot="title">俄罗斯-RU-7</span>
            </el-menu-item>
            <el-menu-item index="14">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xianggang"></use>
              </svg>
              <span slot="title">香港-HK-852</span>
            </el-menu-item>
            <el-menu-item index="14">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-aomen"></use>
              </svg>
              <span slot="title">澳门-MO-853</span>
            </el-menu-item>
            <el-menu-item index="15">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-zhongguo"></use>
              </svg>
              <span slot="title">台湾-TW-886</span>
            </el-menu-item>
            <el-menu-item index="16">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-zhongguo"></use>
              </svg>
              <span slot="title">中国-CN-86</span>
            </el-menu-item>
          </el-menu>
    </el-aside>
    <el-main>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-row>
            <el-col :span="4"><div class="grid-content bg-purple">当前线路:  马来西亚</div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple-light">线路状态: 启用</div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple">线路单价: 1元</div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple-light">线路余额: 999999</div></el-col>
            <el-col :span="1" :offset="7"><el-button size="mini" icon="el-icon-refresh" circle></el-button></el-col>
          </el-row>
        </div>
        <div>
          <el-row>
            <el-col :span="24"><div class="grid-content bg-purple">
              线路详情:  <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-malaixiya"></use>
            </svg>[马来西亚-Malaysia]-国际域名[MY]-短信代码[60]-时差[-0.5]</div></el-col>
          </el-row>
        </div>
      </el-card>
      <el-card class="box-card" >
        <div slot="header" class="clearfix" style="margin-bottom: 5px">
          <span>号码列表 ( 0 )</span>
          <el-button style="float: right;" size="medium" type="primary" icon="el-icon-upload">上传文件</el-button>
        </div>
        <div>
          <el-input
            type="textarea"
            :rows="8"
            placeholder="号码格式为：150****1234,134****1234,139****1234（请以英文键盘的逗号(,)隔开）"
            v-model="smsNum"
           >
          </el-input>
        </div>
      </el-card>
      <el-card class="box-card" >
        <div slot="header" class="clearfix">
          <span>发送内容 ( <span>70</span> ) 字</span>
        </div>
        <div>
          <el-input
            type="textarea"
            :rows="6"
            placeholder="请输入想发送的内容"
            v-model="smsContent"
           >
          </el-input>
          <div style="margin:10px 0px 10px 0px">
          <el-checkbox>添加4到8个随机字符</el-checkbox>
          <el-button type="primary" style="float: right" >发送短信</el-button>
          </div>
          </div>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: 'MyLine',
  data () {
    return {
      smsNum: '',
      smsContent: ''
    }
  }
}
</script>

<style lang="less" scoped>
.el-aside{
  background-color: #FFF;
}
.el-main{
  font-family: "Microsoft YaHei";
}
.box-card{
  margin-bottom: 25px;
}
</style>
